<template>
  <div class="jobSearchListContainer">
    <div class="jobSearchList">
      <div class="jobSearchListTitle">
        <div class="jobSearchListTitleContent">
          <div class="titleFlag" />
          全部岗位
        </div>
        <div class="searchInputContainer">
          <div class="searchInputInner">
            <el-input v-model="matchZpName" placeholder="输入岗位\公司名称关键词" size="small" class="searchInput"
              @keyup.enter.native="inputSearch" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
            <el-button type="primary" size="small" @click="inputSearch">搜 索</el-button>
          </div>
        </div>
      </div>
      <div :class="{ JobSearchListInner: true, canScroll: canScroll }" @scroll="handleListScroll"
        ref="JobSearchListInner" v-loading="loading">
        <template v-if="jobList.length > 0">
          <div class="JobSearchItem" @click="toJobDetail(jobItem)" v-for="jobItem in jobList" :key="jobItem.id">
            <div class="JobSearchItemTop">
              <div class="JobSearchItemTopLeft">
                <div class="jobTitle">{{ jobItem.jtzw }}</div>
                <div class="jobSalaryAndRequire">
                  <span class="jobSalary">
                    <template v-if="jobItem.xzdy_new">
                      {{ jobItem.xzdy_new }}
                    </template>
                    <template v-else-if="jobItem.minsalary && jobItem.maxsalary">
                      {{ jobItem.minsalary }}-{{ jobItem.maxsalary }}/月
                    </template>
                    <template v-else> 薪资面议 </template>
                  </span>
                  <span class="jobRequireList">
                    <span class="jobRequire">{{ jobItem.regionname }}</span>
                    <span class="jobRequireDivide" v-if="jobItem.edus"></span>
                    <span class="jobRequire">{{ jobItem.edus }}</span>
                    <span class="jobRequireDivide" v-if="jobItem.gznum"></span>
                    <span class="jobRequire">{{ jobItem.gznum }}</span>
                  </span>
                </div>
              </div>
              <div class="JobSearchItemTopRight">
                <div class="companyLogoContainer">
                  <img class="companyLogo" :src="jobItem.logo" v-show="jobItem.logo" />
                </div>
                <div class="companyInfo">
                  <div class="companyName">{{ jobItem.cname_all }}</div>
                  <div class="companyReward">
                    <span class="companyRewardItem">{{
                      jobItem.yuangong
                    }}</span>
                    <div class="companyRewardDivide" v-if="jobItem.yuangong"></div>
                    <template v-for="(item, index) in jobItem.fldy">
                      <span class="companyRewardItem" :key="index">{{
                        item
                      }}</span>
                      <div class="companyRewardDivide" v-if="index < jobItem.fldy.length - 1" :key="index + 'divide'">
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
            <div class="JobSearchItemBottom">
              <div class="JobSearchItemBottomLeft" v-if="jobItem.personJobInfo">
                <template v-if="jobItem.personJobInfo">
                  <img :src="jobItem.personJobInfo.pic" alt="" v-if="jobItem.personJobInfo.pic"
                    class="personJobInfoPic" />
                  {{ jobItem.personJobInfo.iname }} ·
                  {{ jobItem.personJobInfo.pnames }}
                  {{ jobItem.personJobInfo.activeTime }}
                </template>
              </div>
              <div class="JobSearchItemBottomMiddle">
                {{ jobItem.address || '' }}
              </div>
              <div class="JobSearchItemBottomRight">{{ jobItem.zptxt }}</div>
            </div>
          </div>
        </template>
        <Empty description="暂无相关岗位" v-else></Empty>
        <div class="isLoading">{{nomore?'没有更多内容啦':"正在加载中~"}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Empty } from "element-ui";
import { throttle } from "lodash";
import { hotRecruitmentPositionList } from "@/api/home";
export default {
  name: "jobSearchList",
  components: {
    Empty,
  },
  props: {
    selectedJobClass: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    canScroll() {
      return this.$store.state.settings.canScroll;
    },
  },
  data() {
    return {
      nomore:false,
      loading: false,
      matchZpName: "",
      jobList: [],
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  watch: {
    selectedJobClass: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.pageParams.pageNo = 1;
        this.nomore=false;
        this.reqCampusJobSearch();
      },
    },
  },
  created() {},
  mounted() {
    // 使用 lodash 的 throttle 函数来防抖
    this.handleListScroll = throttle(this.handleListScroll, 1000);
  },
  methods: {
    reqCampusJobSearch() {
      const regionid = this.selectedJobClass.regionid
        .map((item) => {
          const [id, city] = item.split("-");
          return id;
        })
        .join(",");
      const salary = this.selectedJobClass.salary.join(",");
      const gznum = this.selectedJobClass.gznum.join(",");
      const eduId = this.selectedJobClass.eduId.join(",");
      const zpTrade = this.selectedJobClass.zpTrade.join(",");

      const params = {
        matchZpName: this.matchZpName, //搜索关键字
        regionid,
        salary,
        gznum: gznum == "-1||0" ? "" : gznum,
        eduId,
        zpTrade,
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        rctypes: gznum == "-1||0" ? "0" : "",
      };
      this.loading = true;
      // console.log("------reqCampusJobSearch--------->", this.selectedJobClass);

      hotRecruitmentPositionList(params)
        .then((res) => {
          if (res.code == 200) {
            res.data.forEach((item, index) => {
              if (item.logo) {
                item.logo = item.logo.replace(/http:\/\//g, "//");
              }
            });
            if (this.pageParams.pageNo == 1) {
              this.jobList = res.data;
            } else {
              this.jobList = [...this.jobList, ...res.data];
            }
            if(this.jobList.length>=res.pageparam.sums){
              this.nomore=true;
            }else{
              this.nomore=false;
            }
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    toJobDetail(item) {
      let routeData = this.$router.resolve({
        path: `/job-detail?companyId=${item.uid}&zp_id=${item.id}`,
      });
      window.open(routeData.href, "_blank");
    },
    handleListScroll(e) {
      const container = this.$refs.JobSearchListInner;
      const scrollTop = container.scrollTop; // 滚动的距离
      const scrollHeight = container.scrollHeight; // 内容的总高度
      const clientHeight = container.clientHeight; // 容器的可见高度

      // 判断距离底部小于200px时触发加载
      if (scrollHeight - scrollTop - clientHeight < 400) {
        this.load();
      }
    },
    load() {
      this.pageParams.pageNo = parseInt(this.pageParams.pageNo) + 1;
      this.reqCampusJobSearch();
    },
    inputSearch() {
      this.pageParams.pageNo = 1;
      this.reqCampusJobSearch();
    },
  },
};
</script>

<style lang="scss" scoped>
.jobSearchListContainer {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 219px);
  margin: 0 12px 0 0;
  z-index: 2; //很重要
  min-width: 800px;
  .jobSearchList {
    width: 100%;
    background: #f1f4f9;
    border-radius: 18px;
    padding: 14px 8px 0 20px;
    .jobSearchListTitle {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 600;
      .jobSearchListTitleContent {
        display: flex;
        align-items: center;
      }
      .searchInputContainer {
        display: flex;
        justify-content: center;
        flex: 1;
        .searchInputInner {
          display: flex;
          width: 50%;
          margin: 0 177px 0 127px;
        }
        ::v-deep .el-button {
          height: 40px;
          width: 88px;
          margin-left: -7px;
          border-radius: 0 8px 8px 0;
          background: #4880ff;
          border: 1px solid #4880ff;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          font-style: normal;
        }
        ::v-deep .el-input {
          position: relative;
          height: 40px;
        }
        ::v-deep .el-input__inner {
          height: 40px;
          border-radius: 8px;
          border: 2px solid #4880ff;
          & + .el-input__prefix {
            .el-input__icon:after {
              margin-top: 5px;
            }
          }
          &::placeholder {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #b1b3c7;
            line-height: 20px;
          }
        }
      }
      .titleFlag {
        width: 4px;
        height: 17px;
        border-radius: 32px;
        background-color: #409eff;
        margin-right: 8px;
      }
    }
    .JobSearchListInner {
      width: 100%;
      height: calc(100vh - 209px); //重要
      overflow-y: hidden;
      padding-right: 14px;
      padding-top: 14px;
      &.canScroll {
        overflow-y: scroll;
        padding-right: 10px;
      }
      .JobSearchItem {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        // height: 88px;
        background: rgba(252, 252, 252, 1);
        border-radius: 9px;
        // border: 1px solid #f0f0f0;
        margin-bottom: 14px;
        transition: 0.2s ease-out;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all 0.2s;
        &:hover {
          border-color: #0b6eff;
          transition-delay: 0.2s;
          transform: translateY(-10%);
          .JobSearchItemTop {
            color: #0b6eff;
            transition-delay: 0.2s;
          }
          .JobSearchItemBottom {
            background: #0b6eff;
            transition-delay: 0.2s;
            color: #fff;
          }
        }
        &:before {
          content: "";
          position: absolute;
          width: 400px;
          height: 120%;
          background-color: rgba(11, 110, 255, 0.05);
          top: 50%;
          transform: skewX(30deg) translate(-100%, -50%);
          transition: all 0.4s;
        }
        &:hover::before {
          transform: skewX(30deg) translate(480%, -50%);
          transition-delay: 0.1s;
        }
        .JobSearchItemTop {
          display: flex;
          // height: 89px;
          padding-left: 15px;
          padding-right: 15px;
          padding-top: 16px;
          padding-bottom: 19px;
          position: relative;
          transition: all 0.5s;
          .JobSearchItemTopLeft {
            width: 43%;
            .jobTitle {
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #222222;
              display: flex;
              // align-items: center;
              line-height: 22px;
              margin-bottom: 18px;
            }
            .jobSalaryAndRequire {
              display: flex;
              .jobSalary {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 16px;
                color: #d5413d;
                line-height: 18px;
                text-align: left;
                font-style: normal;
                margin-right: 26px;
              }
              .jobRequireList {
                display: flex;
                align-items: center;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 13px;
                color: #a2a5b3;
                line-height: 18px;
                text-align: left;
                font-style: normal;
                .jobRequireDivide {
                  margin: 0 10px;
                  width: 1px;
                  height: 11px;
                  background: #e5e6eb;
                }
              }
            }
          }
          .JobSearchItemTopRight {
            display: flex;
            // align-items: flex-end;
            align-items: center;
            .companyLogoContainer {
              margin-right: 26px;
              border: 1px solid #e1e4ed;
              // height: 52px;
              padding: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              .companyLogo {
                max-width: 74px;
                height: 52px;
                background: #ffffff;
                border-radius: 2px;
              }
            }
            .companyInfo {
              .companyName {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 16px;
                color: #222222;
                line-height: 18px;
                text-align: left;
                font-style: normal;
                margin-bottom: 17px;
              }
              .companyReward {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                max-width: 530px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 13px;
                color: #a2a5b3;
                line-height: 18px;
                text-align: left;
                font-style: normal;
                .companyRewardDivide {
                  margin: 0 10px;
                  width: 1px;
                  height: 11px;
                  background: #e5e6eb;
                }
              }
            }
          }
        }
        .JobSearchItemBottom {
          letter-spacing: 0.5px;
          position: relative;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 16px;
          padding-right: 17px;
          width: 100%;
          height: 36px;
          background: linear-gradient(
            276deg,
            rgba(218, 240, 247, 0.1) 0%,
            rgba(230, 240, 255, 0.3) 100%
          );
          border-radius: 0px 0px 6px 6px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9cabb7;
          line-height: 20px;
          transition: all 0.5s;
          .personJobInfoPic {
            width: 25px;
            height: 25px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            margin-right: 8px;
          }
          & > div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .JobSearchItemBottomLeft {
            display: flex;
            align-items: center;
            flex: 1;
          }
          .JobSearchItemBottomMiddle {
            flex: 0.7;
          }
          .JobSearchItemBottomRight {
            flex: 1;
          }
        }
        .largeJobSearchItemBottom {
          background: none;
          height: 38px;
          padding-bottom: 2px;
        }
      }
      .isLoading {
        display: flex;
        justify-content: center;
        padding: 24px;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 4px;
  background-color: #f1f4f9;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(207, 216, 230, 1);
  border-radius: 2px;
}
</style>
